import { LiveType } from '@/model/home/types';
import React from 'react';
import { AtButton, AtForm, AtInput, AtMessage } from 'taro-ui';
import './live-add.scss';

const perfix = 'live_add';

interface Props {
  handleCancel: () => void;
  handleCreate: () => void;
  live: LiveType;
  titltChange: (value: string) => void;
  explainChange: (value: string) => void;
}

const LiveAdd = ({ handleCancel, handleCreate, live, titltChange, explainChange }: Props) => (
  <div className={`${perfix}_warpper`}>
    <AtForm>
      <AtInput
        name="value"
        title="标题"
        type="text"
        placeholder="请输入标题"
        value={live.title}
        onChange={(value) => titltChange(String(value))}
      />

      <AtInput
        name="value"
        title="说明"
        type="text"
        placeholder="请输入说明"
        value={live.explain}
        onChange={(value) => explainChange(String(value))}
      />
    </AtForm>

    <div className={`${perfix}_buttons`}>
      <AtButton type="primary" className={`${perfix}_button`} onClick={handleCancel}>
        取消
      </AtButton>

      <AtButton type="primary" className={`${perfix}_button`} onClick={handleCreate}>
        确定
      </AtButton>
    </div>
    <AtMessage />
  </div>
);

export default LiveAdd;
